<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <div v-if="show">
      <van-notice-bar color="#1989fa" background="#fff" left-icon="gift-card-o">
        {{ card.name }}
      </van-notice-bar>
      <van-image
        v-if="card.image"
        width="90%"
        height="16rem"
        fit="contain"
        :src="card.image || '-'"
      />
      <van-cell
        :title="card.comment || card.name"
        :label="'时间: ' + card.begin_date + ' -- ' + card.end_date"
      />
      <van-row type="flex" justify="center" v-if="card.status == 0">
        <van-col span="8">
          <van-button size="small" round block type="info" @click="handleAdd">
            免费领取品鉴卡
          </van-button>
        </van-col>
      </van-row>
      <van-notice-bar
        v-if="card.status == 1"
        left-icon="volume-o"
        scrollable
        text="此次品鉴活动已经结束!"
      />
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import { get_jsapi_sign } from "@/api/utils";
import {
  getWxCardById,
  addWxSampleCard,
  getWxSampleCard,
} from "@/api/card";

export default {
  name: "AppraiseCard",

  props: ["card_id"],

  components: {
    NavBar,
  },

  data() {
    return {
      title: this.$route.meta.title,
      card: {
        id: null,
        name: "",
        comment: "",
        begin_date: null,
        end_date: null,
        image: null,
      },
      show: false,
    };
  },

  created() {
    this.getCard();
  },

  mounted() {
    this.getJsApiSign();
  },

  methods: {
    getJsApiSign() {
      const url = location.href.split("#")[0];
      get_jsapi_sign(url)
        .then((res) => {
          const sign = res.data;
          this.$wx.config({
            debug: false,
            appId: sign.appId,
            timestamp: sign.timestamp,
            nonceStr: sign.nonceStr,
            signature: sign.signature,
            jsApiList: ["updateAppMessageShareData"],
          });
          setTimeout(() => {
            this.onShare();
          }, 500);
        })
        .catch((error) => {
          console.log(error.message);
        });
    },

    getCard() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      //判断是否已经获取
      const params = {
        card_id: this.card_id
      };
      getWxSampleCard(params)
        .then((res1) => {
          if (res1.data.status_code === 400) {
            getWxCardById(this.card_id)
              .then((res) => {
                this.card = res.data;
                this.title = this.card.name;
                this.show = true;
                this.$toast.clear();
              })
              .catch((error) => {
                console.log(error);
                this.$toast.clear();
                this.$notify({ type: "danger", message: "读取数据失败" });
              });
          } else{
            this.$toast.clear();
            let key = res1.data.data.key;
            this.$router.replace({
            name: "Sample",
            params: { sample_key: key },
          });
          }
        })
        .catch((error) => {
          console.log("error: ",error.response);
        });
    },

    onShare() {
      this.$wx.ready(() => {
        this.$wx.updateAppMessageShareData({
          title: this.card.name, // 分享标题
          desc: this.card.comment, // 分享描述
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
          imgUrl: this.card.image || "http://hsh.xzls.vip/media/logohsh.png", // 分享图标
          success: function () {
            // 设置成功
            console.log("successs.....");
          },
        });
      });
    },

    handleAdd() {
      const data = {
        card: this.card.id,
        openid: localStorage.getItem("openid"),
      };
      addWxSampleCard(data)
        .then((res) => {
          console.log(res);
          this.$toast("领取成功!");
          this.$router.push({
            name: "Sample",
            params: { sample_key: res.data.key },
          });
        })
        .catch((err) => {
          console.log(err.response);
          if (err.response) {
            this.$toast(err.response.data.message);
          } else {
            this.$toast("领取失败");
          }
        });
    },
  },
};
</script>

<style  scoped>
.van-checkbox-group {
  padding: 0 10px;
}
/* .van-cell::after{
  border-bottom: 0px;
} */
.van-row {
  margin: 32px;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.van-image {
  padding: 20px;
}
.van-checkbox {
  margin-top: 10px;
}
</style>